<template>
  <div class="index_one">
    <div class="tem">
      <div>
        <img :src="require('../' + route.images)" />
      </div>
      <div class="div_one">
        <p class="p_one">{{ route.names }}</p>
        <p class="p_two">{{ route.type }}</p>
        <p class="p_six">{{ route.region }}/{{ route.timer }}分钟</p>
        <p class="p_three">{{ route.release }}中国大陆上映</p>
        <div class="po">评论</div>
        <p class="p_four">
          电影口碑<br /><span>{{ route.score }}</span>
        </p>
        <p class="p_five">
          累计票房<br /><span class="span_two">{{ route.office }}</span
          ><span class="span_one">万</span>
        </p>
      </div>
    </div>
    <p class="p_seven">
      介绍
    </p>
    <hr />
    <ul>
      <li>
        剧情简介
      </li>
      <span>{{ route.title }}</span>
    </ul>
  </div>
</template>

<style scoped>
.tem {
  display: flex;
  background: linear-gradient(to right, #fff, #f6d1ca);
  padding-top: 30px;
}
img {
  width: 200px;
  height: 280px;
}
.po {
  position: relative;
  top: 28%;
  left: 10%;
  width: 100px;
  height: 20px;
  border: 1px solid #ff6608;
  color: #ff6608;
  background-color: #fff;
  text-align: center;
}
.div_one {
  margin-left: 20px;
}
.p_one {
  font-size: 20px;
  color: #ff6608;
  font-weight: bold;
}
.p_two {
  font-size: 12px;
}
.p_three {
  font-size: 12px;
}
.p_four {
  font-size: 12px;
  margin-left: 400px;
}
.p_four span {
  color: #ff6608;
  font-size: 22px;
}
.p_five {
  font-size: 12px;
  margin-left: 400px;
}
.p_five .span_two {
  color: #ff6608;
  font-size: 22px;
}
.p_five .span_one {
  color: #ff6608;
  font-size: 12px;
}
.p_six {
  font-size: 12px;
}
.p_seven{
  display: inline-block;
  margin-top: 20px;
  color: #ff6608;
  border-bottom: 2px solid #ff6608;
}
li{
  list-style: none;
  font-size: 20px;
  color: #ff6608;
  margin-top: 10px;
  margin-bottom: 5px;
}
</style>

<script>
export default {
  name: "Synopsis",
  data() {
    return {
      route: this.$route.params,
    };
  },
};
</script>
